<template>
  <div class="express-container">
    <el-table ref="tableRef" :data="tableData">
      <el-table-column label="商品信息">
        <template #default="scope">
          <div class="cell-img">
            <ImageView v-model="scope.row.images"></ImageView>
            <div>
              <el-popover
                placement="top-start"
                :width="200"
                trigger="hover"
                title="商品名"
                :content="scope.row.goodsTitle"
              >
                <template #reference>
                  <span class="tips">{{ scope.row.goodsTitle }}</span>
                </template>
              </el-popover>
              <div class="tips" v-if="scope.row.specValue">
                {{ scope.row.specValue }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsPrice" label="原价"></el-table-column>
      <el-table-column prop="num" label="数量"></el-table-column>
      <el-table-column prop="total" label="总金额"></el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
  import ImageView from '@/components/ImageView/index.vue'
  import { ref, watch, computed } from 'vue'
  import { cloneDeep } from 'lodash'
  const props = defineProps({
    id: {
      type: Number,
    },
    orderDetails: {
      type: Object,
      default() {
        return {}
      },
    },
    freightAmount: {
      type: Object,
      default() {
        return 0
      },
    },
  })

  const tableData = computed(() => {
    const { orderDetails = [], freightAmount } = props.orderDetails
    const tmpOrder = cloneDeep(orderDetails)
    return tmpOrder.map((item: any) => {
      item.operator = '商品改价'
      item.modifyPrice = ''

      // 商品金额不需要算运费
      item.total = (item.goodsPrice * item.num) / 100 + '元'
      item.goodsPrice = item.goodsPrice / 100 + '元'
      item.images = [{ url: item.goodsImage }]
      item.skuId = item.id
      if (Array.isArray(item.goodsSpecValues)) {
        item.specValue = '规格: ' + item.goodsSpecValues.join('&')
      }
      return item
    })
  })
</script>
<style lang="scss" scope>
  @import '@/styles/mixin.scss';
  .express-container {
    @include card-shadow;
    background: white;
    padding: 22px 40px;
    display: flex;
    margin-bottom: 20px;
    .cell-img {
      display: flex;
      .imageView-container {
        width: 80px;
        height: 80px;
        border-radius: 5px;
      }
      span {
        margin-left: 8px;
        font-size: 18px;
      }
      .tips {
        margin-left: 8px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .tips + div {
        color: #909399;
      }
    }
  }
</style>
